<template>
  <a-form style="max-width: 550px" :model="formValue" :rules="rules" ref="formRef">
    <a-form-item label="网站名称" name="name">
      <a-input v-model="formValue.name" placeholder="请输入网站名称" />
    </a-form-item>

    <a-form-item label="备案编号" name="icpCode">
      <a-input placeholder="请输入备案编号" v-model="formValue.icpCode" />
    </a-form-item>

    <a-form-item label="联系电话" name="mobile">
      <a-input placeholder="请输入联系电话" v-model="formValue.mobile" />
    </a-form-item>

    <a-form-item label="联系地址" name="address">
      <a-input v-model="formValue.address" type="textarea" placeholder="请输入联系地址" />
    </a-form-item>

    <a-form-item label="登录验证码" name="loginCode">
      <a-radio-group v-model="formValue.loginCode" name="loginCode">
        <a-space>
          <a-radio :value="1">开启</a-radio>
          <a-radio :value="0">关闭</a-radio>
        </a-space>
      </a-radio-group>
    </a-form-item>

    <a-form-item label="网站开启访问" name="systemOpen">
      <a-switch v-model="formValue.systemOpen" @change="systemOpenChange" />
    </a-form-item>

    <a-form-item label="网站关闭提示" name="closeText">
      <a-textarea
        v-model="formValue.closeText"
        :auto-size="{ minRows: 5, maxRows: 8 }"
        placeholder="请输入网站关闭提示"
      />
    </a-form-item>

    <a-form-item>
      <a-button type="primary" @click="formSubmit">更新基本信息</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, toRefs } from 'vue';
  import { Message, Modal } from '@arco-design/web-vue';

  const rules = {
    name: {
      required: true,
      message: '请输入网站名称',
      trigger: 'blur',
    },
    mobile: {
      required: true,
      message: '请输入联系电话',
      trigger: 'input',
    },
  };

  export default defineComponent({
    setup() {
      const formRef: any = ref(null);

      const state = reactive({
        formValue: {
          name: '',
          mobile: '',
          icpCode: '',
          address: '',
          loginCode: 0,
          closeText:
            '网站维护中，暂时无法访问！本网站正在进行系统维护和技术升级，网站暂时无法访问，敬请谅解！',
          systemOpen: true,
        },
      });

      function systemOpenChange(value) {
        if (!value) {
          Modal.warning({
            title: '提示',
            content: '您确定要关闭系统访问吗？该操作立马生效，请慎重操作！',
            okText: '确认',
            cancelText: '取消',
            onBeforeOk() {
              Message.success('操作成功');
              return true;
            },
            onBeforeCancel() {
              state.formValue.systemOpen = true;
              return true;
            },
          });
        }
      }

      function formSubmit() {
        formRef.value
          .validate()
          .then(() => {
            Message.success('验证成功');
          })
          .catch((error) => {
            console.log('error', error);
            Message.error('验证失败，请填写完整信息');
          });
      }

      function resetForm() {
        formRef.value.restoreValidation();
      }

      return {
        formRef,
        ...toRefs(state),
        rules,
        formSubmit,
        resetForm,
        systemOpenChange,
      };
    },
  });
</script>
